<template>
  <view class="page">
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'个人评测-拼读训练'"> </Breadcrumb>
        <RouterTabs :list="routerList" :current="2"> </RouterTabs>
        <view class="content">
          <view class="spelling">
            <view class="spelling_content">
              <view class="spelling_top">
                <image
                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/spelling1.png"
                  mode="widthFix"
                ></image>
              </view>
              <view class="spelling_bottom" @click="study('1')">
                <view class="spelling_left">
                  <view class="spelling_title">拼读训练</view>
                  <view class="spelling_number">
                    <image
                      src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/spelling_num1.png"
                      mode="widthFix"
                    ></image>
                  </view>
                </view>
                <view class="spelling_right">
                  <text class="spelling_right_number">26</text>
                  <text class="spelling_right_text">个英文字母常见发音</text>
                </view>
              </view>
            </view>
            <view class="spelling_content">
              <view class="spelling_top">
                <image
                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/spelling2.png"
                  mode="widthFix"
                ></image>
              </view>
              <view class="spelling_bottom" @click="study('2')">
                <view class="spelling_left">
                  <view class="spelling_title">拼读训练</view>
                  <view class="spelling_number">
                    <image
                      src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/spelling_num2.png"
                      mode="widthFix"
                    ></image>
                  </view>
                </view>
                <view class="spelling_right">
                  <text class="spelling_right_text">元音与辅音组合发音</text>
                </view>
              </view>
            </view>
            <view class="spelling_content">
              <view class="spelling_top">
                <image
                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/spelling3.png"
                  mode="widthFix"
                ></image>
              </view>
              <view class="spelling_bottom" @click="study('3')">
                <view class="spelling_left">
                  <view class="spelling_title">拼读训练</view>
                  <view class="spelling_number">
                    <image
                      src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/spelling_num3.png"
                      mode="widthFix"
                    ></image>
                  </view>
                </view>
                <view class="spelling_right">
                  <text class="spelling_right_text"
                    >元音和元音、半元音组合</text
                  >
                </view>
              </view>
            </view>
            <view class="spelling_content">
              <view class="spelling_top">
                <image
                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/spelling4.png"
                  mode="widthFix"
                ></image>
              </view>
              <view class="spelling_bottom" @click="study('4')">
                <view class="spelling_left">
                  <view class="spelling_title">拼读训练</view>
                  <view class="spelling_number">
                    <image
                      src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/spelling_num4.png"
                      mode="widthFix"
                    ></image>
                  </view>
                </view>
                <view class="spelling_right">
                  <text class="spelling_right_text">辅音与辅音组合</text>
                </view>
              </view>
            </view>
            <view class="spelling_content">
              <view class="spelling_top">
                <image
                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/spelling5.png"
                  mode="widthFix"
                ></image>
              </view>
              <view class="spelling_bottom" @click="study('5')">
                <view class="spelling_left">
                  <view class="spelling_title">拼读训练</view>
                  <view class="spelling_number">
                    <image
                      src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/spelling_num5.png"
                      mode="widthFix"
                    ></image>
                  </view>
                </view>
                <view class="spelling_right">
                  <text class="spelling_right_text">辅音与辅音组合</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      routerList: [
        {
          name: "练习字母",
          url: "pages/spelling/letter",
        },
        {
          name: "浅学音标",
          url: "pages/spelling/soundmarkShallow",
        },
        {
          name: "拼读训练",
          url: "pages/spelling/spellingTraining",
        },
        {
          name: "团灭音标",
          url: "pages/spelling/soundmarkAce",
        },
        {
          name: "暴击词汇",
          url: "pages/spelling/vocabulary",
        },
      ],
    };
  },
  onLoad() {},
  methods: {
    study(type) {
      uni.navigateTo({
        url: `/pages/spelling/spellingTrainingDetail?type=${type}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./spellingTraining";
</style>
